<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        WebSocket Client
    </title>
</head>
<body>
    <script type="text/javascript">
        var socket;
        if (window.WebSocket) {
            socket = new WebSocket("ws://127.0.0.1:8090/annotation-ws")
            // event: msg from server
            socket.onmessage = function(event) {
                console.log("receive msg:"+ event.data);
                var rt = document.getElementById("respText");
                rt.value = rt.value + "\n" + event.data;
            }

            socket.onopen = function(event) {
                var rt = document.getElementById("respText");
                rt.value = "open webSocket";
            }

            socket.onclose = function(event) {
                console.log("receive msg:"+ event.data);
                var rt = document.getElementById("respText");
                rt.value = rt.value + "\n" + "close webSocket";
            }
        } else {
            alert("current explorer not support webSocket")
        }

        function send(message) {
            if(socket.readyState == WebSocket.OPEN) {
                socket.send(message);
            } else {
                alert("WebSocket is not open")
            }
        }
    </script>

    <form onsubmit="return false">
        <textarea name="message" style="height:300px;width 300x;"></textarea>
        <input type="button" value="send" onclick="send(this.form.message.value)" />

        <textarea id="respText" style="height: 300px;width:300px;"></textarea>
        <input type="button" value="clean" onclick="document.getElementById('respText').value=''" />
    </form>

</body>
</html>